<template>
  <jy-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-table border stripe ref="statementTable" :data="dataList" @selection-change="selectionChange" row-key="excelTypeId">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="报表名称" prop="name" align="center" min-width="180" show-overflow-tooltip />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="onShowPreview">预览数据</el-button>
      <el-button size="small" @click="cancel">关 闭</el-button>
    </div>
  </jy-dialog>
</template>
<script>
export default {
  name: "StatementSelectView",
  props: {
    dataList: {
      type: Array,
      default: [],
      required: true
    }
  },
  data() {
    return {
      title: "选择打印或导出的报表内容",
      open: false,
      selection: []
    };
  },
  created() {},
  mounted() {},
  methods: {
    init() {
      this.selection = [];
      this.open = true;
    },
    // 预览
    onShowPreview() {
      if (this.selection.length <= 0) {
        this.$message.warning("请选择需要预览打印/导出的报表");
        return;
      }
      this.$emit("onShowPreview", this.selection);
      this.cancel();
    },
    // 多选框选中类型
    selectionChange(selection) {
      this.selection = selection.map((item) => item.val);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.$refs.statementTable.clearSelection();
    }
  }
};
</script>
<style lang="scss" scoped></style>
